import React from 'react'
import styled from 'styled-components'
import tinydate from 'tinydate'

import Flex from '../components/Flex'
import Text from '../components/Text'
import Icon from '../components/Icon/svg'
import IconPython from '../components/Icon/python.svg'

const stamp = tinydate('{YYYY}.{MM}.{DD}')

const ListItem = ({ onClick, item }) => (
    <ItemWrap column onClick={onClick}>
        <Thumb center>
            <Icon size={98} src={IconPython} color="#4D55D0" />
        </Thumb>
        <Bottom column justify="center">
            <Text type="small" color="white">
                {item.projectName ? item.projectName.slice(0, 12) : '未命名'}
            </Text>
            <Text type="mini" color="white">
                {item.saveTime ? stamp(new Date(item.saveTime)) : '未知'}
            </Text>
        </Bottom>
    </ItemWrap>
)

const ProjectList = ({ list, handleClickItem }) => {
    return (
        <Container auto>
            {list.length > 0 &&
                list.map((item, index) => (
                    <ListItem
                        onClick={() => handleClickItem(item)}
                        item={item}
                        key={index}
                    />
                ))}
        </Container>
    )
}

export default ProjectList

const Container = styled(Flex)`
    flex-wrap: wrap;
    pdding-left: 3px;
    // height: 590px;
    // overflow-y: auto;
`

const ItemWrap = styled(Flex)`
    width: 200px;
    height: 267px;
    margin: 15px 7px;
    box-shadow: 0px 0px 10px #ccc;
    border-radius: 5px;
    overflow: hidden;
`

const Thumb = styled(Flex)`
    height: 219px;
    cursor: pointer;
    &:hover {
        & > img {
            transform: scale(1.3, 1.3);
            transition: transform 0.6s;
        }
    }
`

const Bottom = styled(Flex)`
    height: 48px;
    padding-left: 15px;
    background: rgba(77, 85, 208, 0.4);
    overflow: hidden;
`



// WEBPACK FOOTER //
// ./src/containers/ProjectList.js